
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .wrap {
            width: 400px;
            height: 400px;
            margin: 100px auto 0;
        }

        .wrap h1 {
            text-align: center;
        }

        .wrap div {
            width: 400px;
            height: 300px;
            background: pink;
            font-size: 30px;
            text-align: center;
            line-height: 300px;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
</head>

<body>

<div class="wrap">
    <h1>按键改变颜色</h1>
    <div id="bgChange">
        keyCode为：
        <span id="keyCodeSpan">80</span>
    </div>
</div>
<script>
    //在页面上按键，是哪个颜色的手写字母就改变改颜色，然后span内容赋值
    var oDiv=$("#bgChange");
    var oSpan=$("#keyCodeSpan");

    $(document).keyup(function(ev){
        ev=ev||event;
        switch(ev.keyCode){
            case 80:oDiv.css("background-color","pink");break;
            case 66:oDiv.css("background-color","blue");break;
            case 79:oDiv.css("background-color","orange");break;
            case 89:oDiv.css("background-color","yellow");break;
            case 82:oDiv.css("background-color","red");break;
            default:
                alert("系统没有设置该颜色！");
        }
        oSpan.text(ev.keyCode);
    });
</script>
</body>
</html>
